import React, {Component} from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";

import './App.css';


export default class App extends Component {

    // 状态在哪个组件，操作状态的函数就在哪个组件里写

    // 初始化状态
    state = {
        todos: [
            {id: '001', name: '吃饭', done: true},
            {id: '002', name: '睡觉', done: true},
            {id: '003', name: '打代码', done: false},
            {id: '004', name: '打游戏', done: true}
        ]
    }
    
    // 用于添加一个todo，接收的参数是一个todo对象
    addTodo = (todoObj) => {
        const {todos} = this.state;
        const newTodos = [todoObj, ...todos]
        this.setState({todos: newTodos});
    }

    // 用于更新一个todo对象
    updateTodo = (id, done) => {
        const {todos} = this.state;
        // 匹配处理数据
        const newTodos = todos.map((todoObj) => {
            if (id === todoObj.id) {
                return {...todoObj, done: done}
            } else {
                return todoObj;
            }
        })
        this.setState({todos: newTodos});
    }

    /**
     * 删除
     * @param id 
     */
    deleteTodo = (id) => {
        const {todos} = this.state;
        const newTodos = todos.filter(todo => {
            return todo.id !== id;
        })
        this.setState({todos: newTodos});
    }

    /**
     * 清除所有已完成
     */
    clearAllDone = () => {
        const {todos} = this.state;
        const newTodos = todos.filter(todo => {
            return !todo.done
        })
        this.setState({todos: newTodos});
    }

    /**
     * 
     * @param {*} checked 
     */
    checkAll = (checked) => {
        const {todos} = this.state;
        const newTodos = todos.map((todoObj) => {
            return {...todoObj, done: checked}
        })
        this.setState({todos: newTodos});
    }


    render() {
        const {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={todos}  clearAllDone={this.clearAllDone} checkAll={this.checkAll} />
                </div>
            </div>
        );
    }
}